<template>
    <div>
        <a-input-number :min="0" v-model="startValue" v-bind:style="startStyle"></a-input-number>
        <span v-if="between" style="display:inline-block; width: 15%; text-align: center;">至</span>
        <a-input-number v-if="between" :min="0" v-model="endValue" v-bind:style="endStyle"></a-input-number>
    </div>
</template>

<script>
    export default {
        name: "ComplexNumberValue",
        props: {
            value: Array,
            between: {
                type: Boolean,
                default: false
            },
        },
        data: function () {
            return {
                startValue: 0,
                endValue: 0,
                endStyle: {
                    width: '40%'
                },
            };
        },
        computed: {
            startStyle: function () {
                let style = {
                    width: '40%'
                };
                if(!this.between) {
                    style.width = '100%';
                }
                return style;
            },
        },
        methods: {
            getInitialValue: function () {
                if(this.between && this.value.length === 2) {
                    this.startValue = this.value[0];
                    this.endValue = this.value[1];
                } else if(!this.between && this.value.length === 1) {
                    this.startValue = this.value[0];
                }
            },
            emitValue: function (now, before) {
                const newValue = JSON.stringify(now);
                const oldValue = JSON.stringify(before);
                if(newValue !== oldValue) {
                    const vModelValue = [];
                    vModelValue.push(this.startValue);
                    if(this.between) {
                        vModelValue.push(this.endValue);
                    }
                    this.$emit('input', vModelValue);
                }
            }
        },
        watch: {
            startValue(now, before) {
                this.emitValue(now, before);
            },
            endValue(now, before) {
                this.emitValue(now, before);
            },
        },
        mounted() {
            this.getInitialValue();
        }

    }
</script>

<style scoped>

</style>
